<!--
 * @Date: 2022-02-24 19:09:42
 * @Author: 陶子
 * @LastEditTime: 2023-06-12 14:26:05
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\workOrder\workOrderDetail.vue
 * @pageName: 这是--(报工详情)--页面
-->
<template>
  <jke-modal
    :visible.sync='jkeForm.visible'
    :width='1200'
    :title='jkeForm.title'
    :fullscreen.sync='jkeForm.fullscreen'
    :switchFullscreen='jkeForm.switchFullscreen'
  >
    <div class='page-scroll-wrap'>
      <a-card title='工序信息' :bordered='false' style='margin-top: 12px'>
        <div style='padding: 0 20px'>
          <div class='item-wrap' style='box-sizing: border-box; padding: 0 4px'>
            <div class='wrapLeft'>
              <div class='detail-item'>
                <p class='subtitle'>工单编号</p>
                <p class='secondary-text'>{{ workOrderInfo.orderCode || '-' }}</p>
              </div>
              <div class='detail-item'>
                <p class='subtitle'>生产物品</p>
                <p class='secondary-text'>{{ goodsName || '-' }}</p>
              </div>
              <div class='detail-item'>
                <p class='subtitle'>单位</p>
                <p class='secondary-text'>{{ workOrderInfo.unitName || '-' }}</p>
              </div>
            </div>
          </div>
          <div class='item-wrap' style='margin-top: 40px'>
            <div class='wrapLeft'>
              <div class='detail-item'>
                <p class='subtitle'>工序</p>
                <p class='secondary-text'>{{ workOrderInfo.processesName || '-' }}</p>
              </div>
              <div class='detail-item' style='flex: 2'>
                <p class='subtitle'>计划数</p>
                <p class='secondary-text'>{{ workOrderInfo.planProduceNum || '-' }}</p>
              </div>
            </div>
          </div>
          <div class='item-wrap' style='margin-top: 40px'>
            <div class='wrapLeft'>
              <div class='detail-item'>
                <p class='subtitle'>操作人</p>
                <p class='secondary-text'>{{ workOrderInfo.userText || '-' }}</p>
              </div>
              <div class='detail-item' style='flex: 2'>
                <p class='subtitle'>报工数</p>
                <p class='secondary-text'>
                  {{ workOrderInfo.reportNum || '-' }}
                </p>
              </div>
            </div>
          </div>
          <div class='item-wrap' style='margin-top: 40px'>
            <div class='wrapLeft'>
              <div class='detail-item'>
                <p class='subtitle'>合格数</p>
                <p class='secondary-text'>{{ workOrderInfo.qualifiedNum || '-' }}</p>
              </div>
              <div class='detail-item'>
                <p class='subtitle'>不合格数</p>
                <p class='secondary-text'>{{ workOrderInfo.nonconformityDescribe || '-' }}</p>
              </div>
              <div class='detail-item'>
                <p class='subtitle'>报工时间</p>
                <p class='secondary-text'>
                  {{ workOrderInfo.reportTime || '-' }}
                </p>
              </div>
            </div>
          </div>
          <div class='item-wrap' style='margin-top: 40px'>
            <div class='wrapLeft'>
              <div class='detail-item'>
                <p class='subtitle'>计件工资</p>
                <p class='secondary-text'>
                  {{ workOrderInfo.totalSalary || '-' }}
                </p>
              </div>
            </div>
          </div>

          <div class='item-wrap' style='margin-top: 40px'>
            <div class='detail-item'>
              <p class='subtitle'>附件</p>
              <p class='secondary-text'>
                <FileDetail :ids='workOrderInfo.attachment' :justDownload='true'></FileDetail>
              </p>
            </div>
          </div>
        </div>
      </a-card>
      <div style='margin-top: 12px; margin-bottom: 12px; flex: 1; background: #fff'>
        <a-card title='自定义信息' :bordered='false'>
          <div class='item-wrap' style='box-sizing: border-box; padding: 0 4px' v-if='formTypeExtendedFields.length'>
            <div class='uni-card' style='width: 100%'>
              <div class='item-wrap1'>
                <div class='detail-item' v-for='(item, index) in formTypeExtendedFields' :key='index'>
                  <p class='subtitle'>{{ item.fieldName }}</p>
                  <p class='secondary-text'>{{ workOrderInfo.extDataJson[item.fieldKey] || '-' }}</p>
                </div>
                <div class='detail-item1' v-for='(item, index) in formTypeExtendedFields.length % 3' :key='index'></div>
              </div>
            </div>
          </div>
          <div v-else>
            暂无数据
          </div>
        </a-card>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { numFormat } from '@/utils/util'
import { detailId } from '@/api/produce/productionManage'
import { APILX } from '@/api/requestLx'

export default {
  data() {
    return {
      processId: '',
      reportId: '',
      jkeForm: {
        title: '报工详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      numFormat,
      goodsName: '',
      formTypeExtendedFields: [],
      workOrderInfo: {
        reportUnqualifiedNum: 0,
        num: 0,
        unqualifiedVos: [],
        reportQualifiedNum: 0
      }
    }
  },
  components: {
    crumbs,
    FileDetail
  },
  watch: {
    'jkeForm.visible': function(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },
  computed: {
    percent() {
      let number =
        ((this.workOrderInfo.reportQualifiedNum + this.workOrderInfo.reportUnqualifiedNum) / this.workOrderInfo.num) *
        100
      return Math.floor(number * 100) / 100
    },
    processNum() {
      if (this.workOrderInfo) {
        let nums =
          this.workOrderInfo && this.workOrderInfo.reportQualifiedNum ? this.workOrderInfo.reportQualifiedNum : 0
        let num2 =
          this.workOrderInfo && this.workOrderInfo.reportUnqualifiedNum ? this.workOrderInfo.reportUnqualifiedNum : 0
        let sum = nums + num2
        let num3 = this.workOrderInfo && this.workOrderInfo.num ? this.workOrderInfo.num : 0
        return Math.floor(sum * 100) / 100 + '/' + Math.floor(num3 * 100) / 100
      } else {
        return 0 / 0
      }
    },
    unqualifiedString() {
      let list = ((this.workOrderInfo && this.workOrderInfo.unqualifiedVos) || []).map((item) => {
        return item.unqualifiedName + ':' + item.unqualifiedNum
      })
      return list.join()
    }
  },
  mounted() {
    // this.jkeForm.visible = true
  },
  methods: {
    initDetail(query) {
      this.jkeForm.visible = true
      this.getDetail(query)
    },
    getDetail(query) {
      APILX.formTypeExtendedFieldList({ formType: 4 }).then((res) => {
        if (res.code == 200 && res.result) {
          this.formTypeExtendedFields = res.result
        }
      })
      detailId({ id: query.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.workOrderInfo = res.result
          this.goodsName = `${res.result.serialNumber || '-'}|${res.result.serialName || '-' }|${res.result.serialSpecifications || '-'}`
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';

.fixed-tab {
  /deep/ .ant-tabs-top {
    position: fixed;
    top: 47px; //自己根据需求设定
    width: 100%;
    z-index: 999;

    .ant-tabs-bar {
      padding-left: 14px;
      background: #fff;
    }
  }
}

.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.item-wrap {
  display: flex;
  justify-content: space-between;

  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .detail-item {
      flex: 1;
    }
  }

  .wrapRight {
    width: 116px;

    .detail-item {
      .subtitle {
        min-width: 200px;
        text-align: right;
      }

      .secondary-text {
        text-align: right;
      }
    }
  }
}

.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}

.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}

.tabBox {
  margin-top: 20px;
}

/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}

div.explaneBox {
  .flex(flex-end, center);
  margin-bottom: 40px;

  div.one {
    .flex(center, center);

    div.color {
      width: 14px;
      height: 14px;
      background: #dfdfdf;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.two {
    .flex(center, center);
    margin-left: 40px;

    div.color {
      width: 14px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.three {
    .flex(center, center);
    margin-left: 40px;

    div.color {
      width: 14px;
      height: 14px;
      background: #00b042;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }
}

div.progressBox {
  .flex(flex-start, center);
  flex-wrap: wrap;

  div.itemPro {
    .flex(flex-start, center);
    margin-bottom: 16px;

    &:nth-last-child(1) .itemRight {
      display: none;
    }

    div.itemLeft {
      div.leftTop {
        width: 180px;
        text-align: center;
        font-size: 16px;
        color: #444444;
        margin-bottom: 14px;
      }

      div.leftBot {
        width: 180px;
        height: 138px;
        background: rgba(244, 245, 246, 1);
        border-radius: 6px;
        .flex(space-between, center, column);
        box-sizing: border-box;
        padding: 13px 0;

        div.botOen {
          font-size: 14px;
          color: #888888;
        }

        div.botTwo {
          font-size: 14px;
          color: #888888;
        }

        div.botThree {
          font-size: 14px;
          color: #888888;
        }

        .havePadding {
          .flex(center, center);
          width: 134px;
          font-size: 12px;
          color: #888888;
        }
      }
    }

    div.itemRight {
      height: 2px;
      width: 64px;
      background: #f4f5f6;
      position: relative;
      top: 16px;
    }
  }
}

/deep/ .ant-progress-inner {
  background-color: #dfdfdf;
}

.title {
  font-size: 16px;
  color: #191f25;
  font-weight: bold;

  span {
    font-size: 14px;
    color: #888888;
  }
}

.flexend {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}

.pad {
  padding-right: 20px;
}

.itemBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;

  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
}

.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-wrap1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  flex: 1;

  .detail-item {
    width: 33%;
    margin-bottom: 30px;
  }

  .detail-item1 {
    width: 33%;
  }
}

.item-wrap:nth-of-type(n + 2) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}

.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}

.cards-box {
  // height: calc(100vh - 300px);
  // overflow-y: scroll;
  margin-bottom: 20px;
}

.pic-f {
  display: flex;
  padding: 10px;
  flex: 1;

  .pic-l {
    display: inline-block;
    margin-right: 14px;
  }

  .pic-r {
    flex-direction: column;
    justify-content: space-between;
    display: inline-block;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #444444;
  }
}

.imgClass {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}

.fiexBox {
  position: absolute;
  top: 15px;
  right: -5px;
}

.subtitle {
  min-width: 200px;
}

/deep/ .ant-modal-body {
  height: calc(100vh - 55px) !important;

  .page-scroll-wrap {
    height: calc(100vh - 55px);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
